import { Button, Checkbox, Form, Input, message } from 'antd';
import React, { useState } from 'react';

import { handleCountDown } from '@/util/utils';

import styles from './index.less';

import wechatPic from '../../../assets/images/wechat.png';
interface Props {
  switchMsnOrUser: (arg0: number) => void;
}
const MsnLogin: React.FC<Props> = (props: Props) => {
  const [form] = Form.useForm();
  const [verificationCode, setVerificationCode] = useState(false);
  const [countDownSecond, setCountDownSecond] = useState(60);
  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
  };
  const backPassWordLogin = () => {
    console.log('短信验证码登录');
    props.switchMsnOrUser(0);
  };
  const loginWithWechat = () => {
    console.log('二维码登录');
    props.switchMsnOrUser(2);
  };

  const getCode = () => {
    const phoneNumber = form.getFieldValue('phoneNumber');
    const pattern = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
    if (phoneNumber !== '' && pattern.test(phoneNumber)) {
      setVerificationCode(true);
      handleCountDown(60, setCountDownSecond, setVerificationCode);
    } else {
      message.warn('先填入正确手机号');
      return;
    }
  };
  return (
    <div className={styles.loginForm}>
      <div className={styles.title}>短信验证码登录</div>
      <Form
        form={form}
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={onFinish}
      >
        <Form.Item
          name="phoneNumber"
          rules={[
            { required: true, message: '请正确输入手机号!', pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/ },
          ]}
        >
          <Input placeholder="请正确输入手机号" />
        </Form.Item>
        <Form.Item name="captcha" rules={[{ required: true, message: '请输入验证码!' }]}>
          <Input
            placeholder="请输入验证码"
            suffix={
              <div
                style={
                  verificationCode
                    ? { pointerEvents: 'none', cursor: 'pointer' }
                    : { cursor: 'pointer' }
                }
                onClick={getCode}
                className={styles.getCode}
              >
                <span>|</span> &nbsp;
                {verificationCode ? (
                  `${countDownSecond}秒后重发`
                ) : (
                  <span className={styles.getCodeColor}>获取验证码</span>
                )}
              </div>
            }
          />
        </Form.Item>
        <Form.Item name="autoLogin">
          <div className={styles.autoLogin}>
            <div>
              <Checkbox /> 自动登录
            </div>
            <div>忘记密码</div>
          </div>
        </Form.Item>
        <Form.Item>
          <Button style={{ width: '100%' }} type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>
        <Form.Item>
          <div className={styles.bottomAction}>
            <div onClick={backPassWordLogin} className={styles.goLogin}>
              返回密码登录
            </div>
            <div onClick={loginWithWechat} className={styles.wechat}>
              <img src={wechatPic} alt="" />
              使用微信登录
            </div>
          </div>
        </Form.Item>
      </Form>
    </div>
  );
};
export default MsnLogin;
